@extends('layouts.admin')
@section('title')
    <title>{{ trans('title.user') }}</title>
    @endsection
    @section('content')
            <!-- 中部开始 -->
    <div class="wrapper">
        <!-- 左侧菜单开始 -->
        @include('layouts.left')
                <!-- 左侧菜单结束 -->

        <!-- 右侧主体开始 -->
        <div class="page-content">
            <div class="content">
                <!-- 右侧内容框架，更改从这里开始 -->
                <form class="layui-form xbs" action="" >
                    <div class="layui-form-pane" style="text-align: center;">
                        <div class="layui-form-item" style="display: inline-block;">
                            <label class="layui-form-label xbs768">{{ trans('user.time') }}</label>
                            <div class="layui-input-inline xbs768">
                                <input class="layui-input" placeholder="{{trans('user.time_start')}}" id="LAY_demorange_s">
                            </div>
                            <div class="layui-input-inline xbs768">
                                <input class="layui-input" placeholder="{{trans('user.time_end')}}" id="LAY_demorange_e">
                            </div>
                            <div class="layui-input-inline">
                                <input type="text" name="username"  placeholder="{{trans('user.user_name')}}" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-input-inline" style="width:80px">
                                <button class="layui-btn"  lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
                            </div>
                        </div>
                    </div>
                </form>
                <xblock><button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon">&#xe640;</i>{{trans('user.all_del')}}</button><button class="layui-btn" onclick="member_add('{{trans('user.user_name')}}','member-add.html','600','500')"><i class="layui-icon">&#xe608;</i>{{trans('user.add')}}</button><span class="x-right" style="line-height:40px">{{ trans('user.num_total') }}{{ $page }} {{trans('user.item')}}</span></xblock>
                <table class="layui-table">
                    <thead>
                    <tr>
                        <th>
                            <input type="checkbox" name="" value="">
                        </th>
                        <th>
                            {{trans('user.id')}}
                        </th>


                        <th>
                            {{trans('user.email')}}

                        </th>

                        <th>
                            {{trans('user.add_time')}}

                        </th>
                        <th>
                            {{trans('user.edit_time')}}

                        </th>
                        <th>
                            {{trans('user.operate')}}

                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($datas as $data)
                        <tr>
                            <td>
                                <input type="checkbox" value="1" name="">
                            </td>
                            <td>
                                {{ $data -> id }}
                            </td>
                            <td>
                                <u style="cursor:pointer" >
                                    {{ $data -> name }}
                                </u>
                            </td>



                            <td>
                                {{  $data-> created_at}}
                            </td>
                            <td class="td-status">
                                {{  $data-> updated_at}}

                            </td>
                            <td class="td-manage">
                                <a style="text-decoration:none" onclick="member_view('查看','{{ url('/role') }}/{{$data -> id}}','','510')" href="javascript:;" title="查看">
                                    <i class="layui-icon">&#xe65f;</i>
                                </a>
                                <a title="编辑" href="javascript:;" onclick="member_edit('编辑','member-edit.html','4','','510')"
                                   class="ml-5" style="text-decoration:none">
                                    <i class="layui-icon">&#xe642;</i>
                                </a>
                                <a style="text-decoration:none"  onclick="member_password('修改密码','member-password.html','10001','600','400')"
                                   href="javascript:;" title="修改密码">
                                    <i class="layui-icon">&#xe631;</i>
                                </a>
                                <a title="删除" href="javascript:;" onclick="member_del(this,'1')"
                                   style="text-decoration:none">
                                    <i class="layui-icon">&#xe640;</i>
                                </a>
                            </td>
                        </tr>
                    @endforeach

                    </tbody>
                </table>
                <!-- 右侧内容框架，更改从这里结束 -->
                <div>{!! $datas->links() !!}</div>
            </div>
        </div>
        <!-- 右侧主体结束 -->
    </div>
    <!-- 中部结束 -->


    <!-- 页面动态效果 -->
    <script>

        layui.use(['laydate'], function(){
            laydate = layui.laydate;//日期插件

            //以上模块根据需要引入
            //



            var start = {
                min: laydate.now()
                ,max: '2099-06-16 23:59:59'
                ,istoday: false
                ,choose: function(datas){
                    end.min = datas; //开始日选好后，重置结束日的最小日期
                    end.start = datas //将结束日的初始值设定为开始日
                }
            };

            var end = {
                min: laydate.now()
                ,max: '2099-06-16 23:59:59'
                ,istoday: false
                ,choose: function(datas){
                    start.max = datas; //结束日选好后，重置开始日的最大日期
                }
            };

            document.getElementById('LAY_demorange_s').onclick = function(){
                start.elem = this;
                laydate(start);
            }
            document.getElementById('LAY_demorange_e').onclick = function(){
                end.elem = this
                laydate(end);
            }

        });

        //批量删除提交
        function delAll () {
            layer.confirm('确认要删除吗？',function(index){
                //捉到所有被选中的，发异步进行删除
                layer.msg('删除成功', {icon: 1});
            });
        }
        /*用户-添加*/
        function member_add(title,url,w,h){
            x_admin_show(title,url,w,h);
        }
        /*用户-查看*/
        function member_show(title,url,w,h){
            x_admin_show(title,url,w,h);
        }

        /*用户-停用*/
        function member_view(title,url,id,w,h){
            x_admin_show(title,url,w,h);


        }

        /*用户-启用*/
        function member_start(obj,id){
            layer.confirm('确认要启用吗？',function(index){
                //发异步把用户状态进行更改
                $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="member_stop(this,id)" href="javascript:;" title="停用"><i class="layui-icon">&#xe65f;</i></a>');
                $(obj).parents("tr").find(".td-status").html('<span class="layui-btn layui-btn-normal layui-btn-mini">已启用</span>');
                $(obj).remove();
                layer.msg('已启用!',{icon: 6,time:1000});
            });
        }
        // 用户-编辑
        function member_edit (title,url,id,w,h) {
            x_admin_show(title,url,w,h);
        }
        /*密码-修改*/
        function member_password(title,url,id,w,h){
            x_admin_show(title,url,w,h);
        }
        /*用户-删除*/
        function member_del(obj,id){
            layer.confirm('确认要删除吗？',function(index){
                //发异步删除数据
                $(obj).parents("tr").remove();
                layer.msg('已删除!',{icon:1,time:1000});
            });
        }
    </script>
@endsection
